/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use './mixins' as mixins;
@use '../../../internal/styles/tokens' as awsui;

@mixin animation-fade-in {
  @keyframes awsui-motion-fade-in {
    from {
      opacity: 0.2;
    }

    to {
      opacity: 1;
    }
  }
}

@mixin animation-fade-in-0 {
  @keyframes awsui-motion-fade-in-0 {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@mixin animation-fade-out-0 {
  @keyframes awsui-motion-fade-out-0 {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}

@mixin animation-fade-in-dropdown {
  @keyframes awsui-motion-fade-in-dropdown {
    from {
      opacity: 0.4;
    }

    to {
      opacity: 1;
    }
  }
}

@mixin animation-shake-horizontally {
  @keyframes awsui-motion-shake-horizontally {
    0% {
      transform: translateX(-5px);
      animation-timing-function: linear;
    }

    50% {
      transform: translateX(5px);
      animation-timing-function: awsui.$motion-easing-refresh-only-a;
    }

    100% {
      transform: translateX(0px);
    }
  }
}

@mixin animation-scale-popup {
  @keyframes awsui-motion-scale-popup {
    0% {
      transform: scale(0.95);
    }

    100% {
      transform: scale(1);
    }
  }
}

@mixin spin-180-when-open {
  transform: rotate(0deg);
  @include mixins.with-motion {
    transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
  }
  &-open {
    transform: rotate(-180deg);
  }
}
